<template>
  <div>
    <header-top title="考试列表" >
      <div @click="back" class="back" slot="back"></div>
    </header-top>
    <div class="content clearfix">
      <div v-for="Exam of examList" :key="Exam.id" @click="studentExam(Exam.examId)"   class="exam-list">
        <h3>{{Exam.examName}}</h3>
        <p>{{Exam.startDate.slice(0,10)}}</p>
        <a href="javascript:;">成绩单</a>
      </div>
    </div>

  </div>

</template>

<script>
  import headerTop from "@/components/headerTop/headerTop";
  import {reqExamList} from "@/api";

  export default {
    name: "studentExamDetail",
    components:{
      headerTop:headerTop,
    },
    data(){
      return{
        params:{
        },
        examList:null,

      }
    },

    async mounted() {
      this.params = this.$route.query
      let exams = await reqExamList(this.params.gradeId)
      this.examList = exams.data

    },
    methods:{
      studentExam(examId){
        this.params.examId = examId
        this.$router.replace({path:'/class/exam/studentExam/list/detail',query:this.params})
      },
      back(){
        this.$router.replace({path:'/class/exam/studentExam'})
      }
    }
  }
</script>

<style scoped>

  .exam-list{width: 100%; height: 5.75rem; margin-bottom: 1px; border-bottom:1px solid #f8f8f8 ;
    background:url(images/exam-list-icon.png) no-repeat 25rem center #fff; background-size: 0.45rem 0.825rem; padding-left: 1rem; overflow: hidden; position: relative; box-sizing: border-box;}
  .exam-list h3{ height: 1.05rem; line-height: 1.05rem; font-size: 1.05rem; color:#666; margin:1.325rem 0 1.05rem 0;}
  .exam-list p{ height:1rem; line-height: 1rem; font-size: 1rem; color: #999; background: url(images/exam-time-icon.png) no-repeat left center; background-size: 1rem; padding-left: 1.5rem;}
  .exam-list a{position: absolute; right: 1rem; top: calc(50% - 0.81rem); width: 4.5rem; height: 1.62rem; background: #00c08c; border-radius: 0.81rem; font-size: 1rem; line-height: 1.62rem; text-align: center; color: #fff;}

</style>
